<template>
	<view class="mainpadding2">
		<u-navbar title="商品管理" placeholder autoBack>
			<view class="flexright" slot="right">
				<view class="xiaohong"  @click="jumpurl('/pages/workbench/kuaisutz')">快速調整</view>
			</view>
		</u-navbar>
		<u-sticky bgColor="#fafafa">
			<view style="padding-top: 30rpx;" class="flexbetween">
				<u--input prefixIcon="search" shape="circle" prefixIconStyle="font-size: 22px;color: #909399"
					placeholder="請輸入蒐索內容" v-model="keyname" @confirm="searchGoods"></u--input>
				<view class="" @click="getCode()">
					<u-icon name="scan" color="#ffb800" size="28"></u-icon>
				</view>
			</view>
			<u-tabs lineColor="#FFB800" lineWidth="15" :current="tabcurrent" :activeStyle="{
			             color: '#000000',
			             fontWeight: 'bold',
			             transform: 'scale(1.05)'
			         }" :inactiveStyle="{
			             color: '#666666',
			             transform: 'scale(1)'
			         }" :list="tabList" @click="tabclick" @change="tabChage"></u-tabs>
			<!-- <view class="">
					 	分类名称：{{classname}}
					 </view> -->
			<!-- /pages/my/getcodetwm -->
			<view class="flexbetween" style="padding: 30rpx 30rpx 0;background-color: #fafafa;">
				<view class="flexcenter" @click="jumpurl('/pages/workbench/classifyScreen')">
					<view class="hui_text main_size bold">分類篩選</view>
				</view>
				<view class="flexcenter" @click="selectCom">
					<view :class="type==0?'hei_text main_size bold':'hui_text main_size bold'">綜合排序</view>
				</view>
				<view class="flexcenter" @click="selectSale">
					<view :class="(type==1||type==2)?'hei_text main_size bold':'hui_text main_size bold'">銷量排序</view>
					<view class="flexcolumn">
						<view :class="type==2?'checkshang':'nocheckshang'"></view>
						<view :class="type==1?'checkxia':'nocheckxia'" style="margin-top: 5rpx;"></view>
					</view>
				</view>
				<view class="flexcenter" @click="selectPrice">
					<view :class="(type==3||type==4)?'hei_text main_size bold':'hui_text main_size bold'">價格排序</view>
					<view class="flexcolumn">
						<view :class="type==4?'checkshang':'nocheckshang'"></view>
						<view :class="type==3?'checkxia':'nocheckxia'" style="margin-top: 5rpx;"></view>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="" style="padding-bottom: 150rpx;">
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimage" style="margin-top: 100rpx;"></view>
			</view>
			<view class="mainpadding_top ffffff radius" style="position: relative;" v-for="item in list.data"
				:key="item.id" @click="item.ischeck = !item.ischeck">
				<view class="fuwulable">{{item.id}}</view>
				<view class="checkfocusleft" v-if="item.ischeck">
					<u-icon name="checkbox-mark" color="#fff" size="16"></u-icon>
				</view>
				<view class="pdl ">
					<view class="flexleft">
						<view class="listleftimg radius margin_right">
							<image class="listleftimg radius" :src="item.logoimage" mode=""></image>
						</view>
						<view style="width: 100%;">
							<view class="hei_text main_size bold">{{item.name}}</view>
							<!-- <view class="xiaohui">
								类别:  {{item.gsname}}
							</view> -->
							<view class="flexleft margin_top2">
								<view class="neiyong lableradius xiaohuang margin_right2">免運</view>
								<view class="xiaohui">月售{{item.count}} <text
										v-if="item.end_num!=-1">庫存{{item.end_num}}</text>
									<text v-if="item.end_num==-1">不限庫存</text>
								</view>
							</view>
							<view class="flexbetween margin_top2">
								<view class="xiaohui" v-if="item.is_grounding==1">上架時間 {{item.date}}</view>
								<view class="xiaohui" v-if="item.is_grounding==0">下架時間 {{item.enddate}}</view>
								<view class="main_size huang_text bold">${{Number(item.new_price).toFixed(0)}}</view>
							</view>
						</view>
					</view>
					<view class="xiaohui margin_top2" v-show="item.barcode">國際條碼:{{item.barcode}}</view>
					<view class="xiaohui margin_top2" v-if="item.shopformula_id && item.shopformula">
						計算方式:{{item.shopformula.name}}</view>
					<scroll-view scroll-x="true">
						<view class="flexleft margin_right margin_top">
							<view class="zhizuo lableradius xiaohuang margin_right2" style="white-space: nowrap;"
								v-for="current in item.gsname" :key="current.id">
								{{current.name}}/{{Number(current.price_j).toFixed(0)}}
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="flexbetween margin_top" style="padding: 0 30rpx">
					<view class="flexleft" @click="remove(item.id)">
						<u-icon name="trash" color="#999" size="16"></u-icon>
						<view class="xiaohei">刪除</view>
					</view>
					<view class="flexleft" style="background-color: #ffb800;padding: 15rpx;" v-if="item.is_grounding==1"
						@click="grounding(item,2)">
						<u-icon name="arrow-up" color="#333" size="12"></u-icon>
						<view class="xiaohei">上架中</view>
					</view>
					<view class="flexleft" style="background-color: #f1f1f1;padding: 15rpx;" v-if="item.is_grounding==0"
						@click="grounding(item,1)">
						<u-icon name="arrow-down" color="#999" size="12"></u-icon>
						<view class="xiaohei">下架中</view>
					</view>
					<view class="flexleft" @click="jumpurl(`/pages/workbench/tianjiasp?goodsId=${item.id}`)">
						<u-icon name="edit-pen" color="#999" size="16"></u-icon>
						<view class="xiaohei">編輯</view>
					</view>

				</view>
			</view>
		</view>
		<view class="posibottom ffffff flexbetween mainpadding">
			<view class="resetbtn flexcenter ffffff mainpadding huang_text titletext bold"
				@click="jumpurl('/pages/workbench/fenleigl')">管理分類</view>
			<view class="surebtn flexcenter mainpadding hei_text titletext bold" @click="goincrease">整體調整</view>
		</view>
		<u-modal :show="show" showCancelButton confirmColor="#ffb800" @cancel="show=false" @confirm="confirm"
			confirmText="確認" cancelText="取消">
			<view class="color_ling text_weight text">
				您確定要刪除此商品嗎？
			</view>
		</u-modal>
		<!-- 整体商品编辑、刪除弹出层 -->
		<u-popup :show="showEdit" mode="center" round="30" closeOnClickOverlay @close="showEdit=false">
			<view class="popupBox">
				<view class="text_36" style="margin-top: 80rpx;">選擇操作類型</view>
				<view class="allEdit" @click.stop="allEditButton()">整體編輯</view>
				<view class="allRemove" @click.stop="allRemoveButton()">整體刪除</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				showEdit: false,
				tabList: [],
				tabsId: 1,
				shop_id: uni.getStorageSync("shop_id"),
				pid: 0, //当前分类id
				shopclassify_id: "", //分类id
				type: 0, //排序类型默认0，1=销量降，2-=销量升，3=价格降 4=价格升
				keyname: "", //商品名称
				page:1,
				list: {
					data: []
				},
				isGet: false,
				id: "", //要刪除的商品id
				flag: false, //是否允许整体编辑,
				// classname:""
				tabcurrent: 0
			}
		},
		watch: {
			keyname(newVal, oldVal) {
				if (!newVal) {
					this.flag = false
				}
			}
		},
		onLoad() {
			uni.$on("returnCode", data => {
				this.keyname = data
				this.page = 1
				this.getGoodsList()
			})
			uni.$on("screentext", data => {
				console.log(data, "選擇的分類名稱");
				this.shopclassify_id = ""
				this.keyname = data.trim()
				// console.log(this.keyname, "選擇的分類名稱");
				this.page = 1
				this.getGoodsList()
			})
			this.getGoodsCate()
		},
		onUnload() {
			uni.$off("returnCode")
			uni.$off("screentext")
		},
		onShow() {
			this.$nextTick(() => {
				// 解决uview u-tab，下划线异常
				this.tabcurrent = 0
			});
			this.page = 1
			this.getGoodsList()
		},
		methods: {
			getCode() {
				uni.navigateTo({
					url: "/pages/my/getcodetwm"
				})
			},
			getGoodsCate() { //商品分类
				let _this = this
				this.http.request('/api/shop/shopCategory', 'POST', {
					shop_id: this.shop_id, //店鋪id
				}).then(res=>{
					if (res.code == 1) {
						this.tabList = res.data
						this.tabList.unshift({
							name: "全部",
							id: ""
						})
						this.isGet = true
					} else {
						this.http.toast(res.msg)
					}
				})
				
			},
			async getGoodsList(isPage, page) { //商品列表
				let _this = this
				let shopclassify_id = this.shopclassify_id==""?[]:this.shopclassify_id.split(",")
				let category_id = shopclassify_id.length==0?"":shopclassify_id[shopclassify_id.length - 1] == "" ? shopclassify_id[
						shopclassify_id.length - 2] : shopclassify_id[shopclassify_id.length - 1]
				uni.showLoading({
					mask:true,
					title:"請稍後"
				})
				let res = await this.http.request('/api/goods/listGoods', 'POST', {
					page: page || 1,
					limit: 12,
					shop_id: this.shop_id, //店鋪id
					shopclassify_id: category_id,
					type: this.type, //排序类型默认0，1=销量降，2-=销量升，3=价格降 4=价格升
					name: this.keyname, //商品名称
				})
				uni.hideLoading()
				if (res.code == 1) {
					let logoimage_text = []
					res.data.data.forEach(item => {
						item.logoimage = this.imgUrlUser + item.logoimage
						this.$set(item,"ischeck",false)
					})
					let resList = res.data;
					let dataList = _this.list;
					if (isPage == true) {
						_this.list.data = dataList.data.concat(resList.data);
					} else {
						this.list = res.data
						_this.list.data = resList.data;
					}
				}
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.getGoodsList(true, page);
			},
			searchGoods() { //搜索商品
				if (this.keyname) {
					this.flag = true
				}
				this.page = 1
				this.getGoodsList()
			},
			goincrease() { //整体调整
				if ((this.tabcurrent == 0 && this.keyname != "") || this.tabcurrent != 0) {
					if (this.list.data.length) {
						this.showEdit = true
					} else {
						this.http.toast("沒有符合條件的商品哦！")
					}
				} else {
					// this.http.toast("請先搜索商品！")
					this.showEdit = true
				}
			},
			allEditButton() { //整体编辑
				let shopclassify_id = this.shopclassify_id==""?[]:this.shopclassify_id.split(",")
				let category_id = shopclassify_id.length==0?"":shopclassify_id[shopclassify_id.length - 1] == "" ? shopclassify_id[
						shopclassify_id.length - 2] : shopclassify_id[shopclassify_id.length - 1]
				let goodsids = []
				this.list.data.forEach(item=>{
					if(item.ischeck){
						goodsids.push(item.id)
					}
				})
				uni.navigateTo({
					url: "/pages/workbench/allEditGoods?keywords="+this.keyname + "&category_id="+category_id+"&goodsids="+goodsids.join()
				})
				this.showEdit = false
			},
			async allRemoveButton() { //整体刪除
				let shopclassify_id = this.shopclassify_id==""?[]:this.shopclassify_id.split(",")
				let category_id = shopclassify_id.length==0?"":shopclassify_id[shopclassify_id.length - 1] == "" ? shopclassify_id[
						shopclassify_id.length - 2] : shopclassify_id[shopclassify_id.length - 1]
				let res = await this.http.request('/api/goods/delsGood', 'POST', {
					category_id	: category_id,
					shop_id: this.shop_id, //店鋪id
					keywords:this.keyname
					
				})
				if (res.code == 1) {
					this.http.toast("刪除成功！")
					this.list.data = []
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
				this.showEdit = false
			},
			selectCom() { //综合排序
				this.type = 0
				this.page = 1
				this.getGoodsList()
			},
			selectSale() { //销量排序
				this.type = this.type == 1 ? 2 : 1
				this.page = 1
				this.getGoodsList()
			},
			selectPrice() { //价格排序
				this.type = this.type == 3 ? 4 : 3
				this.page = 1
				this.getGoodsList()
			},
			async grounding(item, type) { //商品上下架
				let date = new Date()
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				month = month < 10 ? '0' + month : month
				let day = date.getDate();
				day = day < 10 ? '0' + day : day
				let time = `${year}-${month}-${day}`
				console.log(time);
				// return
				let res = await this.http.request('/api/goods/startGoods', 'POST', {
					id: item.id, //商品id
					type: type, //1=上架，2-=下架
					time: time, //上架/下架時間
				})
				if (res.code == 1) {
					this.http.toast("操作成功")
					this.page = 1
					this.getGoodsList()
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			remove(id) { //刪除商品
				this.id = id
				this.show = true
			},
			async confirm() { //確認刪除商品
				let _this = this
				let res = await this.http.request('/api/goods/delGoods', 'POST', {
					id: this.id
				})
				if (res.code == 1) {
					this.http.toast("刪除成功！")
					let index = this.list.data.findIndex(item => {
						return this.id == item.id
					})
					this.list.data.splice(index, 1)
				} else if (res.code == 0) {
					// this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
				this.show = false
			},
			tabclick(e) {
				this.tabcurrent = e.index
			},
			tabChage(e) {
				this.shopclassify_id = e.id + ","
				this.page = 1
				this.getGoodsList()
			},
			jumpurl(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.checkfocusleft {
		background-color: #ffb800;
		border-radius: 20rpx 0;
		position: absolute;
		top: 0;
		left: 0;
		padding: 5rpx 30rpx;
	}
	.posibottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.popupBox {
		width: 587rpx;
		height: 504rpx;
		background: #FAFAFA;
		border-radius: 30rpx 30rpx 30rpx 30rpx;

		.text_36 {
			font-size: 36rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
			text-align: center;
		}

		.allEdit {
			width: 386rpx;
			height: 85rpx;
			background: #ffb800;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			margin: 60rpx auto 0;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}

		.allRemove {
			width: 386rpx;
			height: 85rpx;
			background: #ffffff;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			margin: 30rpx auto 0;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 2rpx solid #ffb800;
			font-size: 30rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #ffb800;
		}
	}
</style>